<template>
	<view class="not-open-reward">
		<view class="open-reward">
			<view class="open-money" :class="{'active':active===item.id}" 
			v-for="(item,index) in lists" :key="index" @click="handleSwith(item.id,item.price)">
				<view class="title">
					{{item.name}}
				</view>
				<view class="money">
					<text>{{item.price}}</text>
					<text>zkb</text>
				</view>
				<view class="old-money">
					{{item.old_price}}zkb
				</view>
				<view class="btn">
					<text>立省{{item.old_price-item.price}}zkb</text>
				</view>
			</view>
		</view>
		<view class="explain">
			<block-title :title="'服务说明'" :goUrl="'/pages/public/agreement/agreement?name=悬赏主规则&keyword=lord_rule'" :toast="'悬赏主规则'"></block-title>
			<view class="fw-explain">
				<text>1、禁止发布账号交易，棋牌赌博，涉黄违法任务。</text>
				<text>2、禁止发布隐藏步骤，隐藏投资等违规任务。</text>
				<text>3、禁止发布刷单，套现，损害平台利益的任务。</text>
				<text>4、禁止发布连环任务（需要拉人，提现，完成新手任务等）。</text>
				<text>若违规发布任务，我们有权冻结任务资金，严重者封号处理，账号内资产不退。</text>
			</view>
		</view>
		<view class="bottom-btn" @click="open()">
			<text>立即以{{price}}zkb{{userInfo.reward_lord?"续费":"开通"}}</text>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from "vuex";
	import BlockTitle from "@/components/BlockTitle/BlockTitle.vue"
	import {lordLists,openLord} from "@/api/reward.js"
	export default{
		name:"not-open-reward",
		components:{
			BlockTitle
		},
		data(){
			return{
				lists:[],
				active:1,
				price:0,
			}
		},
		onLoad() {
			this.getList();
		},
		computed:{
			...mapState(["userInfo"]),
		},
		methods:{
			...mapActions(['setUserInfo_action']),
			async getList(){
				let res = await lordLists();
				if(res.code === 1){
					this.lists = res.data;
					this.active = res.data[0].id;
					this.price = res.data[0].price;
				}
			},
			handleSwith(id,price){
				this.active = id;
				this.price = price;
			},
			//开通
			async open(){
				let res = await openLord({id:this.active})
				if(res.code === 1){
					this.$msg(res.msg,1500,true,"success","center")
					this.setUserInfo_action();
					setTimeout(()=>{
						uni.navigateBack();
					},1500)
				}else{
					this.$msg(res.msg)
				}
				console.log(res)
			}
		}
	}
</script>

<style scoped lang="less" src="./not-open-reward.less">
</style>
